<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
            <!-- <div class="disFlex Flex-between Flex-bottom">
                <div class="component-title">{{moduleData.label_name_cn}}</div>
                <template v-if="moduleData.more">
                    <div class="disFlex vertical" v-if="moduleData.more.display">
                        <div class="Flex"></div>
                        <div class="more">查看更多</div>
                    </div>
                </template>
            </div>
            <div class="component-desc">{{moduleData.label_info_summary}}</div> -->
            <div class="_content normal disFlex Flex-wrap" v-if="moduleData.data && moduleData.data.length > 0">
                <div class="_item disFlex vertical" v-for="(jtem,j) in moduleData.data">
                    <div class="_itemImage disFlex vertical">
                        <div class="img bgCover Flex" :style="'background-image: url('+ jtem.image_path +')'">
							<div class="price"><span>¥</span><span style="font-size: 16px; font-weight: bold;margin-left:2px;">{{jtem.style[0].price_publicize}}</span></div>
						</div>
						<p style="font-size: 16px; font-weight:bold;padding: 10px 0 5px 0;">{{jtem.goods_title}}</p>
						<p style="color: gray;">{{jtem.goods_summary}}</p>
						<div class="btn-buy">去购买</div>
                    </div>                                                                                                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'GoodsListModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
        	curpage: 0
    	}
    },
    methods: {
    	delModule() {
            this.$emit("delModule",this.moduleData);        
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>
@import url("../baseModule.less");
	
._content ._item {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f2f2f2;
}
._content.normal ._item{width: 100%;}
._content.normal ._item:nth-child(2n){margin-right: 0}
._content.normal ._item ._itemImage {width:100%;text-align: center;}
._content.normal ._item ._itemImage .img{width:100%; height:200px;position: relative;}
.bgCover {
	background: #f8f8f8;
}
.btn-buy {
	width: 80px;
	margin: 0 auto;
	background: yellow;
	font-size: 12px;
	padding: 3px;
	border-radius: 5px;
	margin-top: 15px;
}
.price {
	background: rgba(0, 0, 0, 0.7);
	padding: 5px;
	color: white;
	font-size: 12px;
	position: absolute;left: 0;bottom: 0;right: 0;
	text-align: left;
	padding-left: 10px;
}
</style>
